<!doctype HTML public "-//W3C//DTD HTML 4.0 Frameset//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="Adobe RoboHelp - www.adobe.com">
<title>Creating a Fish Eye Selector</title>
<link rel="stylesheet" href="userhelp_ns.css"><script type="text/javascript" language="JavaScript" title="WebHelpSplitCss">
<!--
if (navigator.appName !="Netscape")
{   document.write("<link rel='stylesheet' href='userhelp.css'>");}
//-->
</script>
<style type="text/css">
<!--
img_whs1 { border:none; width:509px; height:297px; float:none; border-style:none; }
img_whs2 { border:none; width:450px; height:449px; float:none; border-style:none; }
img_whs3 { border:none; width:398px; height:330px; float:none; border-style:none; }
table.whs4 { x-cell-content-align:top; border-spacing:0px; }
tr.whs5 { x-cell-content-align:top; }
td.whs6 { padding-right:10px; padding-left:10px; border-left-style:Solid; border-left-color:#000000; border-top-color:#000000; border-top-style:Solid; border-right-style:Solid; border-right-color:#000000; border-bottom-color:#000000; border-bottom-style:Solid; border-right-width:1px; border-left-width:1px; border-top-width:1px; border-bottom-width:1px; background-color:#e7e7e7; }
td.whs7 { padding-right:10px; padding-left:10px; border-top-color:#000000; border-top-style:Solid; border-right-style:Solid; border-right-color:#000000; border-bottom-color:#000000; border-bottom-style:Solid; border-right-width:1px; border-top-width:1px; border-bottom-width:1px; background-color:#e7e7e7; }
p.whs8 { font-weight:bold; }
td.whs9 { padding-right:10px; padding-left:10px; border-top-color:#000000; border-top-style:Solid; border-right-style:Solid; border-right-color:#000000; border-bottom-color:#000000; border-bottom-style:Solid; border-top-width:1px; border-bottom-width:1px; border-right-width:1px; background-color:#e7e7e7; }
td.whs10 { padding-right:10px; padding-left:10px; border-left-style:Solid; border-left-color:#000000; border-left-width:1px; border-right-style:Solid; border-right-color:#000000; border-right-width:1px; border-bottom-width:1px; border-bottom-color:#000000; border-bottom-style:Solid; }
td.whs11 { padding-right:10px; padding-left:10px; border-right-style:Solid; border-right-color:#000000; border-right-width:1px; border-bottom-width:1px; border-bottom-color:#000000; border-bottom-style:Solid; }
td.whs12 { border-left-width:1px; border-left-color:#000000; border-left-style:Solid; border-right-width:1px; border-right-color:#000000; border-right-style:Solid; border-bottom-style:Solid; border-bottom-color:#000000; border-bottom-width:1px; padding-right:10px; padding-left:10px; }
td.whs13 { border-right-width:1px; border-right-color:#000000; border-right-style:Solid; border-bottom-style:Solid; border-bottom-color:#000000; border-bottom-width:1px; padding-right:10px; padding-left:10px; }
td.whs14 { padding-right:10px; padding-left:10px; border-left-width:1px; border-left-color:#000000; border-left-style:Solid; border-right-width:1px; border-right-color:#000000; border-right-style:Solid; border-bottom-style:Solid; border-bottom-color:#000000; border-bottom-width:1px; }
td.whs15 { padding-right:10px; padding-left:10px; border-right-width:1px; border-right-color:#000000; border-right-style:Solid; border-bottom-style:Solid; border-bottom-color:#000000; border-bottom-width:1px; }
-->
</style><script type="text/javascript" language="JavaScript" title="WebHelpInlineScript">
<!--
function reDo() {
  if (innerWidth != origWidth || innerHeight != origHeight)
     location.reload();
}
if ((parseInt(navigator.appVersion) == 4) && (navigator.appName == "Netscape")) {
	origWidth = innerWidth;
	origHeight = innerHeight;
	onresize = reDo;
}
onerror = null; 
//-->
</script>
<style type="text/css">
<!--
div.WebHelpPopupMenu { position:absolute; left:0px; top:0px; z-index:4; visibility:hidden; }
-->
</style><script type="text/javascript" language="javascript1.2" src="whmsg.js"></script>
<script type="text/javascript" language="javascript" src="whver.js"></script>
<script type="text/javascript" language="javascript1.2" src="whproxy.js"></script>
<script type="text/javascript" language="javascript1.2" src="whutils.js"></script>
<script type="text/javascript" language="javascript1.2" src="whlang.js"></script>
<script type="text/javascript" language="javascript1.2" src="whtopic.js"></script>
</head>
<body><script type="text/javascript" language="javascript1.2">
<!--
if (window.gbWhTopic)
{
	if (window.addTocInfo)
	{
	addTocInfo("Creating and modifying documents and dashboards\nProviding Flash-based analysis and interactivity: Widgets\nCreating a Fish Eye Selector\nCreating a Fish Eye Selector");
addButton("show",BTN_TEXT,"Show","","","","",0,0,"","","");

	}
	if (window.writeBtnStyle)
		writeBtnStyle();

	if (window.writeIntopicBar)
		writeIntopicBar(1);

	if(1)
	{
	
	}

	if (window.setRelStartPage)
	{
	setRelStartPage("MicroStrategy_Web_Help.htm");

		autoSync(1);
		sendSyncInfo();
		sendAveInfoOut();
	}
}
else
	if (window.gbIE4)
		document.location.reload();

//-->
</script>
<h1>Creating a Fish Eye Selector</h1>
<p>The Fish Eye Selector magnifies an item when a user hovers the cursor 
 over it in Flash Mode or View Mode in MicroStrategy Web. Any item that 
 a user hovers over or selects remains magnified, while the remaining items 
 are minimized and displayed in the background of the selector. A Fish 
 Eye Selector in Flash Mode is shown below, targeting a Grid/Graph. </p>
<p><img src="images/fisheye_flash.gif" x-maintain-ratio="TRUE" width="509px" height="297px" border="0" class="img_whs1"></p>
<p>In non-Flash modes in MicroStrategy Web, a Fish Eye Selector can display 
 as a Grid/Graph (if it was created as a widget) or as a standard selector 
 such as a listbox or button bar (if it was created as a selector). </p>
<p>The same dashboard is shown below in Interactive Mode in MicroStrategy 
 Web. The Fish Eye Selector was created using a widget, so the selector 
 is now displayed as a Grid/Graph. All the employees are not shown in this 
 sample, because the list is so long. Notice that the previous selection, 
 Jack Kieferson, is far down the list. Because the list is so long, names 
 even further down the list may not appear in the same screen as the graph, 
 which is why the Fish Eye Selector is so useful. </p>
<p><img src="images/fisheye_grid.gif" x-maintain-ratio="TRUE" width="450px" height="449px" border="0" class="img_whs2"></p>
<p>In non-Flash modes, the widget can instead be hidden or displayed as 
 an empty Grid/Graph placeholder. For examples, see 
<a href="Widget_non_Flash.htm">Defining 
 how a widget is rendered in non-Flash modes</a>.</p>
<p>If the Fish Eye Selector was created as a selector rather than a widget, 
 in Interactive Mode the dashboard looks like the sample shown below. The 
 Fish Eye Selector is defined to not display as a widget in DHTML Mode. 
 You can set the style of the selector, which in this example is Button 
 Bar. Again, all the employees are not shown, because the list is so long. 
 Notice that the selection shown in Flash Mode, Jack Kieferson, is not 
 even shown in this image, because he is so far down the list. </p>
<p><img src="images/fisheye_selector.gif" x-maintain-ratio="TRUE" width="398px" height="330px" border="0" class="img_whs3"></p>
<p>These examples target a Grid/Graph, but a panel stack can also be the 
 target of a Fish Eye Selector. However, a Fish Eye Selector created as 
 a widget cannot switch panels on a panel stack. </p>
<p>&nbsp;</p>
<p>The table below summarizes the differences between a Fish Eye Selector 
 created as a widget and as a selector.</p>
<table x-use-null-cells cellspacing="0" class="whs4">
<script language='JavaScript'><!--
if ((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) == 4)) document.write("</table><table x-use-null-cells cellspacing='0' border='1' bordercolor='black' bordercolorlight='black' bordercolordark='black'>");
//--></script>
<col>
<col>
<col>


<tr valign="top" class="whs5">
<td bgcolor="#E7E7E7" class="whs6">
<p>&nbsp;</td>
<td bgcolor="#E7E7E7" class="whs7">
<p class="whs8">Widget</td>
<td bgcolor="#E7E7E7" class="whs9">
<p class="whs8">Selector</td></tr>

<tr valign="top" class="whs5">
<td class="whs10">
<p>Display in Flash Mode</td>
<td class="whs11">
<p>Fish Eye Selector</td>
<td class="whs11">
<p>Fish Eye Selector</td></tr>

<tr valign="top" class="whs5">
<td class="whs12">
<p>Display in non-Flash modes</td>
<td class="whs13">
<p>Can be any of the following:</p>
<ul>
<li class=p-TopicTextBulleted><p class=TopicTextBulleted>Grid/Graph 
 used as a selector</p></li>
	
<li class=p-TopicTextBulleted><p class=TopicTextBulleted>Empty Grid/Graph 
 placeholder</p></li>
	
<li class=p-TopicTextBulleted><p class=TopicTextBulleted>Hidden</p></li>
	
<li class=p-TopicTextBulleted><p class=TopicTextBulleted>Fish Eye Selector</p></li>
</ul></td>
<td class="whs13">
<p>Can be either:</p>
<ul>
<li class=P-TopicTextBulleted><p class=TopicTextBulleted>Selector displayed 
 in the chosen DHTML style</p></li>
	
<li class=P-TopicTextBulleted><p class=TopicTextBulleted>Fish Eye Selector</p></li>
</ul></td></tr>

<tr valign="top" class="whs5">
<td colspan="1" rowspan="1" class="whs10">
<p>Target panel stacks and Grid/Graphs</td>
<td colspan="1" rowspan="1" class="whs11">
<p>Yes</td>
<td colspan="1" rowspan="1" class="whs11">
<p>Yes</td></tr>

<tr valign="top" class="whs5">
<td colspan="1" rowspan="1" class="whs14">
<p>Switch panels on a panel stack</td>
<td colspan="1" rowspan="1" class="whs15">
<p>No</td>
<td colspan="1" rowspan="1" class="whs15">
<p>Yes</td></tr>

<tr valign="top" class="whs5">
<td colspan="1" rowspan="1" class="whs10">
<p>Replace selector item text with images</td>
<td colspan="1" rowspan="1" class="whs11">
<p>Yes</td>
<td colspan="1" rowspan="1" class="whs11">
<p>Yes</td></tr>

<tr valign="top" class="whs5">
<td colspan="1" rowspan="1" class="whs14">
<p>Target of another selector</td>
<td colspan="1" rowspan="1" class="whs15">
<p>Yes</td>
<td colspan="1" rowspan="1" class="whs15">
<p>Only if the selector is on a panel stack (see 
<a href="Allowing_a_selector_to_be_updated_by_other_selectors.htm">Allowing 
 a selector to be updated by other selectors</a>)</td></tr>

<tr valign="top" class="whs5">
<td colspan="1" rowspan="1" class="whs10">
<p>Method of creating</td>
<td colspan="1" rowspan="1" class="whs11">
<p>Create a widget</td>
<td colspan="1" rowspan="1" class="whs11">
<p>Create a selector</td></tr>
<script language='JavaScript'><!--
if ((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) == 4)) document.write("</table></table><table>");
//--></script>
</table>
<p>&nbsp;</p>
<p>For instructions to create a Fish Eye Selector as a widget, see 
<a href="Defining_a_Fisheye_widget.htm">Creating 
 a Fish Eye Selector as a widget</a>. For instructions to create a Fish 
 Eye Selector as a selector, see 
<a href="Creating_a_Fisheye_widget_as_a_selector.htm">Creating 
 a Fish Eye Selector as a selector</a>. For instructions to replace selector 
 item text with images, see 
<a href="Replacing_the_selector_items_of_a_Fish_Eye_Selector_with_images.htm">Replacing 
 the selector items of a Fish Eye Selector with images</a>.</p>
<p>&nbsp;</p>
<script type="text/javascript" language="javascript1.2">
<!--
highlightSearch();
if (window.writeIntopicBar)
	writeIntopicBar(0);
if(0)
{

}
//-->
</script>
</body>
</html>
